<template>
  <div>
    <el-tag
      v-for="tab in tabList"
      :key="tab.name"
      :closable="tab.name != 'home'"
      :effect="tab.name === $route.name ? 'dark' : 'plain'"
      @close="handleClose(tab)"
      @click="tabSwitch(tab)"
    >
      {{tab.title}}
    </el-tag>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CommonTag',
  methods: {
    ...mapMutations([
      'closeTab'
    ]),
    handleClose(tab) {
      this.closeTab(tab)
    },
    tabSwitch(tab) {
      this.$router.push(tab.path)
      this.$store.commit('selectMenu', tab)
    }
  },
  computed: {
    ...mapState([
      'tabList'
    ])
  }
}
</script>
<style lang="scss" scoped>
  .el-tag {
    margin: 15px;
  }
</style>